<template>
    <div class="scrollXItem" @click="todetail(ID)">
        <img class="ximg" :src="imgSrc"/>
        <p class="title">{{title}}</p>
        <p class="price">￥{{price}}</p>
        <s class="orprice">￥{{orprice}}</s>
    </div>
</template>

<script>
    export default {
        name: "mainXScrollItem",
        props: ['imgSrc', 'title', 'price', 'orprice', 'ID'],
        methods: {
            todetail(ID) {
                console.log('点击了scrollXitem', ID);
                this.$router.push('/pages/details/main?ID=' + ID);
            }

        },

    }
</script>

<style scoped>
    .scrollXItem {
        height: 192px;
        width: 120px;
        margin-left: 5px;
        display: inline-block;
        overflow: hidden;
        padding: 10px;
        border-radius: 5px;
        background-color: white;
        box-shadow: 5px 5px 5px #dad9d1;
        margin-right: 5px;
    }

    .ximg {
        width: 100px;
        height: 100px;
    }

    .title {
        width: 100px;
        height: 43px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal !important;
        line-height: 22px;
        margin-top: 10px;
        margin-bottom: 5px;
        padding: 0;
        font-size: 15px;
    }

    .price {
        font-size: 15px;
        display: inline-block;
        margin-right: 10px;
        /*margin-top: 10px;*/
        color: #ff702d;
    }

    .orprice {
        font-size: 10px;
        text-decoration: line-through;
        display: inline-block;
        color: #aaaaaa;
    }
</style>
